<template>
	<view class="page-index">
		<u-navbar title=" " :background="background" :border-bottom="false" :is-back="false" title-color="#fff"
			back-icon-color="#fff">
			<view class="u-flex p12 u-f-jsb" style="width: 100%;">
				<image src="../../static/image/logo.png" style="width: 180rpx;height: 50rpx;"></image>
				<view class="u-flex">
					<image src="../../static/image/i-k.png" @click="toPage('/pages/single/single?id=67')"
						class="w16 h16"></image>
					<image @click="toSwitch('/pages/message/list')" src="../../static/image/i-m.png"
						class="w16 h16 ml28"></image>
					<image @click="toSwitch('/pages/product/index')" src="../../static/image/i-s.png"
						class="w16 h16 ml28"></image>
				</view>
			</view>
		</u-navbar>
		<view class="bg-white p12 pt0">
			<swiper style="height:410rpx;margin: 0 auto;">
				<swiper-item v-for="(item,index) in bannerList" :key="index">
					<view class="item">
						<image :src="item.picUrl" mode="aspectFill" style="width: 100%;display: block;height:410rpx;">
						</image>
					</view>
				</swiper-item>
			</swiper>
			<view class="u-flex u-f-justify mt16 pb4">
				<view class="u-f1" style="text-align: center;" v-for="(item,index) in actionList" :key="index"
					@click="toAct(item)">
					<image :src="item.picUrl" class="w30 h30"></image>
					<view class="fz12">{{item.title}}</view>
				</view>
			</view>
		</view>
		<view class="p12 pt18">
			<view class="u-flex u-f-jsb fz16 mb10" @click="toSwitch('/pages/product/index')">最新房源
				<span class="fz12">查看更多<u-icon name="arrow-right" color="#000"></u-icon></span>
			</view>
			<view class="u-flex " style="flex-wrap:wrap;margin:0 -12rpx">
				<view style="width:50%;min-width:50%" v-for="(item,index) in dataList" :key="index"
					@click="toInfo(item)">
					<view class="p6">
						<image v-if="item.mainImage" :src="item.mainImage" style="width: 100%;height: 400rpx;"
							mode="aspectFill"></image>
						<view>
							<view class="fz14">{{item.propertyName}}</view>
							<view class="fz12 mt6 c9 u-line-1">{{item.detailedAddress}}</view>
								<view class="u-flex fz12 mt10">
									<span class="c6">投资份额</span>
									<span class="color-price ml6">{{item.remainingShares}}</span>
								</view>
								
								<view class="u-flex fz12 mt4" v-if="item.preIncome">
									<span class="c6">预计收益</span>
									<span class="color-price ml6">￥{{item.preIncome}}</span>
								</view>
							
								<view class="u-flex fz12 mt5">
									<span class="c6">月租</span>
									<span class="color-price ml6">￥{{item.rentAmount}}</span>
								</view>
								<view class="u-flex fz12 mt5">
									<span class="c6">{{item.isRented==1?'出租中':'未出租'}}</span>
									<span class="color-price ml6" v-if="item.leaseEndDateFormat && item.isRented==1">租期至{{item.leaseEndDateFormat}}</span>
								</view>
							
						</view>
					</view>
				</view>
			</view>

			<!-- <u-loadmore :status="loadStatus"></u-loadmore> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					background: '#ffffff'
				},
				bannerList: [],
				loadStatus: 'loadmore',
				page: 1,
				dataList: [],
				actionList: []
			}
		},
		onShareAppMessage(e) {},
		onShow() {

			this.init()
			this.initData()
			if (this.$db.get("userToken")) {


				this.$api.memberInfo({}, res => {
					if (res.code == 200) {
						if (!res.data.mobile) {
							this.showTips = true
						}
					}
				})
			}
		},
		onLoad(e) {
			let _this = this;
			uni.getSystemInfo({
				success(res) {
					console.log(res, 123123)
					_this.statusBarHeight = res.statusBarHeight
					_this.bannerHeight = (res.windowHeight)
				}
			})


		},

		onPageScroll(e) {},

		methods: {
			toSwitch(url) {

				uni.switchTab({
					url
				})
			},
			toPage(url) {
				uni.navigateTo({
					url
				})
			},
			init() {


				this.$nextTick(() => {
					this.$api.adList({
						position: 1
					}, res => {
						if (res.code == 200) {
							this.bannerList = res.data;
						}
					})
					this.$api.adList({
						position: 2
					}, res => {
						if (res.code == 200) {
							this.actionList = res.data;
						}
					})

				})
			},


			initData() {
				this.page = 1
				this.dataList = []
				this.getData()

			},
			getData() {
				let post = {
					pageNo: this.page,
					pageSize: 4
				}
				this.$api.getHousingList(post, res => {
					if (res.code == 200) {

						let _list = res.data.list
						this.dataList = [...this.dataList, ..._list]
						// 判断所有数据是否请求完毕
						if (res.data.total > this.dataList.length) {
							this.page++
							this.loadStatus = 'more'
						} else {
							this.loadStatus = 'noMore'
						}
					}
				})
			},
			toAct(item) {


				if (item.url && item.url.indexOf('http') >= 0) {

					uni.navigateTo({
						url: `/pages/webview/webview?src=${item.url}`
					})
					return
				}


							if (item.url == '/pages/rent/index') {

								uni.switchTab({
									url: item.url
								})
								return
							}
							uni.navigateTo({
								url: item.url
							})
				// if (this.$db.get("userToken")) {
				// 	this.$api.memberInfo({}, res => {
				// 		if (res.code == 200) {
				// 		}
				// 	})

				// } else {

				// 	this.$common.errorToShow('请先登录！')
				// 	uni.navigateTo({
				// 		url: '/pages/login/index'
				// 	})
				// }

			},
			toInfo(item) {
				uni.navigateTo({
					url: '/pages/product/info?id=' + item.id
				})
			}
		}
	}
</script>

<style lang="scss">
	.nav-logo {
		position: fixed;
		top: 44px;
		left: 0;
		z-index: 10;
		padding: 20rpx 40rpx
	}

	.page-btn {

		position: absolute;
		bottom: 10px;
		left: 0;
		right: 0;
		z-index: 10;
		padding: 30rpx;
		text-align: center;


		.btn1 {

			text-align: center;
			color: #fff;
			display: inline-block;
			margin: 40rpx auto 0;
			padding: 12rpx 50rpx;
			background: #ABC7C9;
			border-radius: 40px;
		}

	}

	.page-index {
		position: relative;

		.item {
			position: relative;
		}

		.item-content {
			position: absolute;
			z-index: 1;
			color: #fff;
			bottom: 0;
			left: 0;
			right: 0;
		}

		.btn {

			width: 144rpx;
			height: 50rpx;
			text-align: center;
			color: #fff;
			line-height: 50rpx;
			background: #ABC7C9;
			border-radius: 40px;
		}
	}

	.page-content {
		position: relative;
		z-index: 2
	}

	.btn-sure {

		width: 100%;
		height: 88rpx;
		text-align: center;
		color: #fff;
		margin: 0 auto;
		line-height: 88rpx;
		background: #ABC7C9;
		border-radius: 40px;
	}
</style>